<div class="d-flex root" [class.compact]="size === 'Compact'" [class.mini]="size === 'Mini'" (sqxResized)="setSize($event)">
    <div class="form-group flex-grow me-1 mb-0">
        @if (isDateTimeMode && shouldShowDateTimeModeButton) {
            <div>
                @if (snapshot.isLocal) {
                    <button class="btn btn-text-secondary btn-sm btn-time-mode" (click)="setLocalMode(false)" type="button">
                        {{ "common.dateTimeEditor.local" | sqxTranslate }}
                    </button>
                }

                @if (!snapshot.isLocal) {
                    <button class="btn btn-text-secondary btn-sm btn-time-mode" (click)="setLocalMode(true)" type="button">
                        {{ "common.dateTimeEditor.utc" | sqxTranslate }}
                    </button>
                }
            </div>
        }

        <div class="input-group flex-grow">
            <input
                class="form-control form-date"
                #dateInput
                (blur)="callTouched()"
                [class.with-buttons]="isDateTimeMode && shouldShowDateTimeModeButton"
                [formControl]="dateControl"
                maxlength="10"
                minlength="0"
                placeholder="{{ 'common.date' | sqxTranslate }}" />
            @if (isDateTimeMode) {
                <input class="form-control form-time" (blur)="callTouched()" [formControl]="timeControl" placeholder="{{ 'common.time' | sqxTranslate }}" />
            }
        </div>

        @if (!hideClear) {
            <button class="btn btn-text-secondary btn-sm btn-clear" [class.hidden]="!hasValue" (click)="reset()" [disabled]="snapshot.isDisabled" type="button">
                <i class="icon-close"></i>
            </button>
        }
    </div>

    @if (isDateTimeMode && shouldShowDateButtons) {
        <div class="form-group">
            <button
                class="btn btn-text-secondary btn-quick"
                (click)="writeNow()"
                [disabled]="snapshot.isDisabled"
                title="i18n:common.dateTimeEditor.nowTooltip"
                type="button">
                {{ "common.dateTimeEditor.now" | sqxTranslate }}
            </button>
        </div>
    }

    @if (!isDateTimeMode && shouldShowDateButtons) {
        <div class="form-group">
            <button
                class="btn btn-text-secondary btn-quick"
                (click)="writeToday()"
                [disabled]="snapshot.isDisabled"
                title="i18n:common.dateTimeEditor.todayTooltip"
                type="button">
                {{ "common.dateTimeEditor.today" | sqxTranslate }}
            </button>
        </div>
    }
</div>
